﻿
@{
    ViewData["Title"] = "Lightbox";
}




<!-- [ Main Content ] start -->
<section class="pcoded-main-container">
    <div class="pcoded-wrapper">
        <div class="pcoded-content">
            <div class="pcoded-inner-content">
                <!-- [ breadcrumb ] start -->
                <div class="page-header">
                    <div class="page-block">
                        <div class="row align-items-center">
                            <div class="col-md-12">
                                <div class="page-header-title">
                                    <h5 class="m-b-10">Light Box</h5>
                                </div>
                                <ul class="breadcrumb">
                                    <li class="breadcrumb-item"><a href="/Dashboard/@Pages.Dashboard.Value"><i class="feather icon-home"></i></a></li>
                                    <li class="breadcrumb-item"><a href="#!">Advance Components</a></li>
                                    <li class="breadcrumb-item"><a href="#!">Light Box</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- [ breadcrumb ] end -->
                <div class="main-body">
                    <div class="page-wrapper">
                        <!-- [ Main Content ] start -->
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="alert alert-primary" role="alert">
                                    <p>Use our extra helper file for quick setup Advance Components in your page - <a href="/ElementAdvance/@Pages.AdvancePackage.Value" target="_blank" class="alert-link">CHECKOUT</a></p>
                                    <label class="text-muted">Copy/paste source code in your page in just couples of seconds.</label>
                                </div>
                            </div>
                            <!-- [ single-lightbox ] start -->
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Single Images</h5>
                                    </div>
                                    <div class="card-block">
                                        <p> Use this code <code>data-toggle="lightbox"</code> to see image in lightbox popup. </p>
                                        <div class="row text-center">
                                            <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                                <a href="~/assets/images/light-box/l1.jpg" data-toggle="lightbox" data-title="Datta Image 1" data-footer="Datta Image 1"><img src="~/assets/images/light-box/sl1.jpg" class="img-fluid m-b-10" alt=""></a>
                                            </div>
                                            <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                                <a href="~/assets/images/light-box/l2.jpg" data-toggle="lightbox" data-title="Datta Image 2" data-footer="Datta Image 2"><img src="~/assets/images/light-box/sl2.jpg" class="img-fluid m-b-10" alt=""></a>
                                            </div>
                                            <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                                <a href="~/assets/images/light-box/l3.jpg" data-toggle="lightbox" data-title="Datta Image 3" data-footer="Datta Image 3"><img src="~/assets/images/light-box/sl3.jpg" class="img-fluid m-b-10" alt=""></a>
                                            </div>
                                            <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                                <a href="~/assets/images/light-box/l4.jpg" data-toggle="lightbox" data-title="Datta Image 4" data-footer="Datta Image 4"><img src="~/assets/images/light-box/sl4.jpg" class="img-fluid m-b-10" alt=""></a>
                                            </div>
                                            <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                                <a href="~/assets/images/light-box/l5.jpg" data-toggle="lightbox" data-title="Datta Image 5" data-footer="Datta Image 5"><img src="~/assets/images/light-box/sl5.jpg" class="img-fluid m-b-10" alt=""></a>
                                            </div>
                                            <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                                <a href="~/assets/images/light-box/l6.jpg" data-toggle="lightbox" data-title="Datta Image 6" data-footer="Datta Image 6"><img src="~/assets/images/light-box/sl6.jpg" class="img-fluid m-b-10" alt=""></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- [ single-lightbox ] end -->
                            <!-- [ Image-Gallery ] start -->
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Image Gallery</h5>
                                    </div>
                                    <div class="card-block">
                                        <p> Add this code <code>data-gallery="example-gallery"</code> to see image gallery in lightbox popup. </p>
                                        <div class="row text-center">
                                            <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                                <a href="~/assets/images/light-box/l1.jpg" data-toggle="lightbox" data-gallery="example-gallery"><img src="~/assets/images/light-box/sl1.jpg" class="img-fluid m-b-10" alt=""></a>
                                            </div>
                                            <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                                <a href="~/assets/images/light-box/l2.jpg" data-toggle="lightbox" data-gallery="example-gallery"><img src="~/assets/images/light-box/sl2.jpg" class="img-fluid m-b-10" alt=""></a>
                                            </div>
                                            <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                                <a href="~/assets/images/light-box/l3.jpg" data-toggle="lightbox" data-gallery="example-gallery"><img src="~/assets/images/light-box/sl3.jpg" class="img-fluid m-b-10" alt=""></a>
                                            </div>
                                            <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                                <a href="~/assets/images/light-box/l4.jpg" data-toggle="lightbox" data-gallery="example-gallery"><img src="~/assets/images/light-box/sl4.jpg" class="img-fluid m-b-10" alt=""></a>
                                            </div>
                                            <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                                <a href="~/assets/images/light-box/l5.jpg" data-toggle="lightbox" data-gallery="example-gallery"><img src="~/assets/images/light-box/sl5.jpg" class="img-fluid m-b-10" alt=""></a>
                                            </div>
                                            <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                                <a href="~/assets/images/light-box/l6.jpg" data-toggle="lightbox" data-gallery="example-gallery"><img src="~/assets/images/light-box/sl6.jpg" class="img-fluid m-b-10" alt=""></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- [ Image-Gallery ] end -->
                            <!-- [ video-Gallery ] start -->
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Video Gallery</h5>
                                    </div>
                                    <div class="card-block">
                                        <p> Add this code <code>data-gallery="youtubevideos"</code> to see videos in lightbox popup. </p>
                                        <div class="row  text-center">
                                            <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                                <a href="https://www.youtube.com/watch?v=IkyZHPnfFnE" data-toggle="lightbox" data-gallery="youtubevideos"><img src="~/assets/images/light-box/v1.jpg" class="img-fluid m-b-10" alt=""></a>
                                            </div>
                                            <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                                <a href="https://www.youtube.com/watch?v=IkyZHPnfFnE" data-toggle="lightbox" data-gallery="youtubevideos"><img src="~/assets/images/light-box/v2.jpg" class="img-fluid m-b-10" alt=""></a>
                                            </div>
                                            <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                                <a href="https://www.youtube.com/watch?v=IkyZHPnfFnE" data-toggle="lightbox" data-gallery="youtubevideos"><img src="~/assets/images/light-box/v3.jpg" class="img-fluid m-b-10" alt=""></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- [ video-Gallery ] end -->
                            <!-- [ Mixin-Gallery ] start -->
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Mixin Gallery</h5>
                                    </div>
                                    <div class="card-block">
                                        <p> Add this code <code>data-gallery="mixedgallery"</code> to see mixed gallery in lightbox popup. to use vimeo add code <code>data-remote="vimeo url"</code></p>
                                        <div class="row text-center">
                                            <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                                <a href="https://www.youtube.com/watch?v=IkyZHPnfFnE" data-toggle="lightbox" data-gallery="mixedgallery"><img src="~/assets/images/light-box/v1.jpg" class="img-fluid m-b-10" alt=""></a>
                                            </div>
                                            <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                                <a href="~/assets/images/light-box/mixin.jpg" data-toggle="lightbox" data-gallery="mixedgallery"><img src="~/assets/images/light-box/smixin.jpg" class="img-fluid m-b-10" alt=""></a>
                                            </div>
                                            <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                                <a href="http://vimeo.com/246066429" data-remote="http://player.vimeo.com/video/246066429" data-toggle="lightbox" data-gallery="mixedgallery"><img src="~/assets/images/light-box/v4.jpg" class="img-fluid m-b-10" alt=""></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- [ Mixin-Gallery ] end -->
                            <!-- [ single-light ] start -->
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Single Images ( light box 2 )</h5>
                                    </div>
                                    <div class="card-block">
                                        <p> Add this code <code>data-lightbox="roadtrip"</code> to see roadtrip gallery in lightbox popup.</p>
                                        <div class="row text-center">
                                            <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                                <a href="~/assets/images/light-box/l3.jpg" data-lightbox="roadtrip"><img src="~/assets/images/light-box/sl3.jpg" class="img-fluid m-b-10" alt=""></a>
                                            </div>
                                            <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                                <a href="~/assets/images/light-box/l4.jpg" data-lightbox="roadtrip" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing lorem impus dolorsit.onsectetur adipiscing."><img src="~/assets/images/light-box/sl4.jpg" class="img-fluid m-b-10" alt=""></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- [ single-light ] end -->
                            <!-- [ multiple-light ] start -->
                            <div class="col-sm-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h5>Multiple Images Or Image Set (light box 2)</h5>
                                    </div>
                                    <div class="card-block">
                                        <p> Add this code <code>data-lightbox="example-set"</code> to see roadtrip gallery in lightbox popup.</p>
                                        <div class="row  text-center">
                                            <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                                <a href="~/assets/images/light-box/l1.jpg" data-lightbox="example-set"><img src="~/assets/images/light-box/sl1.jpg" class="img-fluid m-b-10" alt=""></a>
                                            </div>
                                            <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                                <a href="~/assets/images/light-box/l2.jpg" data-lightbox="example-set" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing lorem impus dolorsit.onsectetur adipiscing."><img src="~/assets/images/light-box/sl2.jpg" class="img-fluid m-b-10" alt=""></a>
                                            </div>
                                            <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                                <a href="~/assets/images/light-box/l5.jpg" data-lightbox="example-set" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing lorem impus dolorsit.onsectetur adipiscing."><img src="~/assets/images/light-box/sl5.jpg" class="img-fluid m-b-10" alt=""></a>
                                            </div>
                                            <div class="col-xl-2 col-lg-3 col-sm-4 col-xs-12">
                                                <a href="~/assets/images/light-box/l6.jpg" data-lightbox="example-set" data-title="Lorem ipsum dolor sit amet, consectetur adipiscing lorem impus dolorsit.onsectetur adipiscing."><img src="~/assets/images/light-box/sl6.jpg" class="img-fluid m-b-10" alt=""></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- [ multiple-light ] end -->
                        </div>
                        <!-- [ Main Content ] end -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- [ Main Content ] end -->


@section Styles{
    <!-- ekko-lightbox css -->
    <link rel="stylesheet" href="~/assets/plugins/ekko-lightbox/css/ekko-lightbox.min.css">
    <link rel="stylesheet" href="~/assets/plugins/lightbox2-master/css/lightbox.min.css">
}

@section Scripts{
    <!-- ekko-lightbox Js -->
    <script src="~/assets/plugins/ekko-lightbox/js/ekko-lightbox.min.js"></script>
    <script src="~/assets/plugins/lightbox2-master/js/lightbox.min.js"></script>
    <script src="~/assets/js/pages/ac-lightbox.js"></script>
}

